<template>
	<div class="cner">
		<div class="header">
			<div>
				<span>没有你想要的？</span>
			</div>
			<div>
				<router-link to="/order">
					目的地大全
					<i class="iconfont" style="font-size: 0.01rem;">&#xe622;</i>
				</router-link>
			</div>
		</div>
		<!--  -->
		<div class="bottom">
			<p class="xptj">新品推荐</p>
			<div class="jx">
				<div class="jx2" v-for="item in cnerList" :key="item.id">
					<router-link to="/order">
						<div :style="{backgroundImage:'url('+item.imgURL+')',backgroundSize:'cover'}" class="div1">
							<p>{{item.name}}</p>
						</div>
						<div class="div2">
							{{item.ms}}
						</div>
						<div>
							<div class="float_left">
								<b>￥</b>
								<b>{{item.jg}}</b>
								起
							</div>
							<div class="float_right">
								{{item.ts}}
							</div>
						</div>
					</router-link>
				</div>
				<!-- <ul>
					<li :style="{backgroundImage:'url('+jxtjList[0].imgURL+')',backgroundSize:'cover'}">
						<router-link to="/">
							
						</router-link>
					</li>
					<li>2</li>
				</ul> -->
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:"Cner",
	data(){
		return{
			cnerList:[
				{ id:1 , imgURL:"cnerimg/cnerimg-01.jpg",ms:"[浙南秘境·高铁小车团·升级版]缙云仙都-云和梯田（日出）-古堰画乡（晨景+夜景）-田园松阳，由慢时光小镇至云海古村的探索之旅（小车随行，适合家庭出游）",jg:1360,name:"小车团 | 缙云西站/丽水站 ",ts:"2天1晚" },
				{ id:2 , imgURL:"cnerimg/cnerimg-02.jpg",ms:"[游侠宝贝·房山亲子乐园]大型彩虹滑道，坦克小火车挖掘机，沙池蹦床大黄蜂，捉鱼打靶射击，80cm以下儿童免票，49.9不限时畅玩20多项亲子娱乐项目！",jg:49.9,name:"跟团游 | 全国各地出发",ts:"1天" },
				{ id:3 , imgURL:"cnerimg/cnerimg-03.jpg",ms:"[山水慈溪·寻源之旅]8-10月，探秘方家河头村，发现鸳鸯古樟，探九龙飞瀑胜境，“一迹、二池、三石、四瀑“，林间步道，茂林溪瀑（上海出发，休闲进阶）",jg:180,name:"跟团游 | 上海出发",ts:"1天" },
				{ id:4 , imgURL:"cnerimg/cnerimg-04.jpg",ms:"[秋日环山骑行·莫干山]莫干山骑行，40公里休闲慢骑，欧系田园生活，打卡小众对河口水库，体验闲适乡村生活，骑行诗意裸心谷，探访隐秘莫干山，慢享避暑莫干山，细品秋色莫干山",jg:100,name:"跟团游 | 杭州出发",ts:"1天" },
				{ id:5 , imgURL:"cnerimg/cnerimg-05.jpg",ms:"[双岛骑行·长兴+横沙]足不出沪，双岛骑行50km，疾速海浪追风，滨海大桥/林荫道/长江第一滩/稻田风车穿行，一天时间足不出沪，玩转两岛，金秋聚圆！",jg:170,name:"跟团游 | 上海出发",ts:"1天" },
			]
		}
	}
}
</script>

<style scoped>
*{
	margin: 0;
	padding: 0;
}
a{
	color: black;
	outline: none;
}
.header{
	line-height: 1.6rem;
	margin: 0.2rem auto 0;
	width: 94%;
	display: flex;
	border-top: 0.01rem solid #eee;
	border-bottom: 0.01rem solid #eee;
}
.header span{
	font-size: 0.35rem;
	color: #999;
}
.header a{
	display: block;
	width: 5rem;
	line-height: 0.7rem;
	margin-top: 0.4rem;
	margin-left: 0.5rem;
	text-align: center;
	border-radius: 0.5rem;
	background: #fffae5;
}
.bottom .xptj{
	line-height: 1.2rem;
	color: gray;
	font-size: 0.35rem;
	text-indent: 1em;
}
/*  */
.jx{
	height: 10rem;
}
.jx .jx2{
	margin-left: 0.3rem;
	width: 45%;
	float: left;
	height: 4.5rem;
}
.jx2 a .div1{
	height: 2.3rem;
	border-radius: 0.1rem;
	position: relative;
	background-size: cover;
	background: center center no-repeat;
}
.jx2 a .div1 p{
	position: absolute;
	left: 0;
	top: 0.12rem;
	padding-left: 0.1rem;
	padding-right: 0.2rem;
	height: 0.42rem;
	line-height: 0.38rem;
	font-size: 0.22rem;
	color: white;
	border-radius: 0 0.16rem 0.16rem 0;
	background: rgba(0,0,0,0.6);
}
.jx2 a .div2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-top: 0.1rem;
	padding: 0 0.1rem;
	height: 0.87rem;
	line-height: 0.44rem;
	font-size: 0.28rem;
	color: #000000;
	overflow: hidden;
	font-size: 0.35rem;
}
.jx2 a div:nth-child(3){
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 0.2rem;
	padding: 0 0.1rem;
	font-size: 0.35rem;
}
.float_left{
	color: gray;
	height: 0.2rem;
}
.float_left b:nth-child(1){
	color: #ff7100;
}
.float_left b:nth-child(2){
	font-weight: bold;
	color: #ff7100;
}
.float_right{
	color: gray;
}
</style>
